<template>
  <div id="app">
    <el-header>
      <el-row :gutter="10" type="flex" justify="space-between">
        <el-col>
          2018年时间:
          <br />
          <el-date-picker
            v-model="value7"
            value-format="yyyy-MM-dd"
            type="daterange"
            align="right"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            popper-class="datapicker"
            :picker-options="pickerOptions2"
          ></el-date-picker>
        </el-col>
        <el-col>
          2019年时间:
          <br />
          <el-date-picker
            v-model="value8"
            value-format="yyyy-MM-dd"
            type="daterange"
            align="right"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            popper-class="datapicker"
            :picker-options="pickerOptions3"
          ></el-date-picker>
        </el-col>
        <el-col>
          选择渠道（可以手动输入回车确认查询）:
          <br />
          <el-select
            v-model="ztlxs"
            placeholder="请选择"
            filterable
            allow-create
            default-first-option
          >
            <el-option
              v-for="(item, index) in qudao_list"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col>
          选择报表:
          <br />
          <el-select v-model="urlbk" placeholder="请选择">
            <el-option
              v-for="(item, index) in res_list"
              :key="index"
              :label="item[0]"
              :value="item[1]"
            ></el-option>
          </el-select>
          <el-button type="primary" :loading="submit_progress" @click="getData"
            >提交</el-button
          >
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <component
        :is="urlbk"
        v-if="dataEnd"
        :midData="midData"
        :dateList="dateList"
        :value2018="value2018"
        :value2019="value2019"
      ></component>
    </el-main>
  </div>
</template>

<script>
import xsqk from "./components/xsqk";
import mpxsqk from "./components/mpxsqk";
import rqdyfx from "./components/rqdyfx";
import yfmx from "./components/yfmx";
import tspz from "./components/tspz";
import tcxs from "./components/tcxs.vue";

export default {
  name: "app",
  data: function() {
    return {
      dialogVisible: false,
      pickerOptions2: {
        shortcuts: [
          {
            text: "2018最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setFullYear(2018);
              end.setFullYear(2018);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "2018最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setFullYear(2018);
              end.setFullYear(2018);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "2018最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setFullYear(2018);
              end.setFullYear(2018);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      pickerOptions3: {
        shortcuts: [
          {
            text: "2019最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "2019最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "2019最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value7: "",
      value8: "",
      ztlxs: "",
      urlbk: "",
      xsqk: false,
      qudao_list: [
        "全网",
        "横店影视城网络运营中心",
        "淘宝旗舰店",
        "淘宝旅游专营店",
        "云商城",
        "横游网",
        "携程网",
        "京东",
        "驴妈妈",
        "美团",
        "途牛",
        "同程",
        "马蜂窝"
      ],
      res_list: [
        ["销售情况", "xsqk"],
        ["门票销售情况", "mpxsqk"],
        ["用房情况", "yfmx"],
        ["特殊票种", "tspz"],
        ["套餐销售情况", "tcxs"],
        ["人群地域分析", "rqdyfx"]
      ],
      dataEnd: false,
      currentComponentIndex: null,
      currentComponents: ["xsqk", "mpxsqk", "yfmx", "rqdyfx", "tspz", "tcxs"],
      midData: "",
      dateList: [],
      submit_progress: false
    };
  },
  components: {
    xsqk,
    mpxsqk,
    rqdyfx,
    yfmx,
    tspz,
    tcxs
  },
  computed: {
    value2018() {
      if (this.value7 instanceof Array) {
        return this.getMonthBetween(this.value7[0], this.value7[1]);
      } else {
        return this.getMonthBetween("", "");
      }
    },
    value2019() {
      if (this.value8 instanceof Array) {
        return this.getMonthBetween(this.value8[0], this.value8[1]);
      } else {
        return this.getMonthBetween("", "");
      }
    }
  },
  mounted() {},
  methods: {
    handleClose(done) {
      this.$confirm("确定关闭?")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    getMonthBetween(start, end) {
      let result = [];
      let s = start.split("-");
      let e = end.split("-");
      let min = new Date();
      let max = new Date();
      min.setFullYear(s[0], s[1]);
      max.setFullYear(e[0], e[1]);
      let curr = min;
      while (curr <= max) {
        let month = curr.getMonth();
        month === 0 ? 12 : month;
        result.push(month);
        curr.setMonth(month + 1);
      }
      return result;
    },
    getData: function() {
      this.dataEnd = false;
      this.submit_progress = true;
      let self = this;
      let url;
      if (!this.value7) {
        this.value7 = ["", ""];
      }
      if (!this.value8) {
        this.value8 = ["", ""];
      }
      url = `http://118.25.136.154/data/${this.urlbk}?startTime1=${
        this.value7[0]
      }&endTime1=${this.value7[1]}&startTime2=${this.value8[0]}&endTime2=${
        this.value8[1]
      }&ztlxs=${this.ztlxs}`;
      //http://118.25.136.154
      this.$http.get(url).then(response => {
        this.midData = response.data;
        self.res_list.forEach((item, index) => {
          item[1] === self.urlbk ? (self.currentComponentIndex = index) : null;
        });
        this.dataEnd = true;
        this.submit_progress = false;
        if (this.value7[0] == "" && this.value7[1] == "") {
          this.value7 = "";
        }
        if (this.value8[0] == "" && this.value8[1] == "") {
          this.value8 = "";
        }
      });
    }
  }
};
</script>

<style>
@media (max-width: 768px) {
  .datapicker {
    width: 100% !important;
  }
}
.xzgn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.xzgn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xzgn-item img {
  border-top: 2px black dashed;
  padding-top: 10px;
  width: 100%;
  display: block;
}
.xzgn-item p {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 2px black dashed;
}
</style>
